<%@ page import="ac.zlf.springmybatis.admin.bjui.constant.Uri" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/common/_common_prefix.jsp" %>
<div class="bjui-pageHeader">
    <label style="line-height: 24px;padding-left: 5px;">单击树形节点，可对其编辑!</label>
</div>
<div class="bjui-pageContent tableContent">
    <table class="table" height="100%">
        <tr>
            <td width="35%" style="vertical-align: top;height: 100%;padding: 10px;">
                <button type="button" class="btn-green" data-icon="plus-square" style="margin-bottom: 5px;"
                        onclick="AMenuTreeShow.handleAddUpdate()">
                    新增
                </button>
                </br>
                <input id="search_tree_name" value="${searchObj.label}" style="width: 200px"
                       placeholder="请输入要搜索的文字！">
                <button type="button" class="btn-blue btn_tree_search" data-icon="search">
                    查询
                </button>

                <ul id="ztree-dictory-point" class="ztree"
                    style="height: 90%;overflow-y: scroll;"
                    data-expand-all="true"
                    data-on-click="AMenuTreeShow.handleAddUpdate"
                    data-add-hover-dom="edit"
                    data-remove-hover-dom="edit"
                    data-on-remove="AMenuTreeShow.handleDelAfter"
                    data-before-remove="AMenuTreeShow.handleDelBefore"
                    data-max-add-level="2"
                    data-toggle="ztree">
                    <c:forEach items="${list}" var="item">
                        <li data-id="${item.id }"
                            data-pid="${item.parentId }"
                            <c:choose>
                                <c:when test="${item.garde == 1 || item.garde == 2}">
                                    data-add-haver="false"
                                    data-remove-haver="false"
                                </c:when>
                                <c:otherwise>
                                    data-remove-haver="false"
                                </c:otherwise>
                            </c:choose>
                            data-selectAddUpdateShow="#content_left_dictory"
                            data-faicon="ellipsis-v"
                            data-title="${item.menuName}">
                            <hs:out value="${item.menuName}" length="25"/>
                        </li>
                    </c:forEach>
                </ul>
            </td>
            <td tyle="vertical-align: top;">
                <div id="content_left_dictory"
                     style=" border:1px #cccccc solid;width: 100%; height: 100%;">
                </div>
            </td>
        </tr>
    </table>
</div>
<script>

    var AMenuTreeShow = function () {
        var addShowUrl = "${root}<%=Uri._A_MENU_ADD_SHOW%>";
        var updateShowUrl = "${root}<%=Uri._A_MENU_UPDATE_SHOW%>";
        var delHandleUrl = "${root}<%=Uri._A_MENU_DEL_SUBMIT%>";

        var selectAddUpdateShowDiv = "#content_left_dictory";//添加和跟新时显示的div

        var treeId = "ztree-dictory-point";
        var selectSeachBtn = ".btn_tree_search";//搜索按钮选择器
        var selectSearchInput = "#search_tree_name";//搜索input选择器

        function handleSeachEvent() {
            $.CurrentNavtab.find(selectSeachBtn).on("click", function () {
                var searchValue = $.CurrentNavtab.find(selectSearchInput).val();
                if (!CommonUtilValidate.isEmpty(searchValue)) {
                    var zTree = $.fn.zTree.getZTreeObj(treeId), nodeList = [];
                    var node = zTree.getNodesByParamFuzzy("name", searchValue);

                    if (node === null) {
                        nodeList = [];
                        return;
                    } else {
                        nodeList = node;
                    }
                    var highlight = true;
                    zTree.cancelSelectedNode();
                    for (var i = 0, l = nodeList.length; i < l; i++) {
                        nodeList[i].highlight = highlight;
                        zTree.selectNode(nodeList[i], true, false);
                    }
                }
            });
        }

        function addUpdateShow(treeNode) {
            var url = "";
            if (CommonUtilValidate.isEmpty(treeNode) || CommonUtilValidate.isEmpty(treeNode.id)) {
                url = addShowUrl;
            } else {
                url = updateShowUrl;
            }
            var obj = {};
            if (!CommonUtilValidate.isEmpty(treeNode)) {
                obj.id = treeNode.id;
                obj.parentId = treeNode.pId;
            }
            $(this).bjuiajax('doLoad', {
                target: selectAddUpdateShowDiv, url: url, data: obj, callback: function (ret) {
                    console.log(ret);
                }
            })
        }

        function delHandle(treeNode) {
            var obj = {};
            if (typeof(treeNode.id) == 'undefined') {
                return;
            }
            obj.id = treeNode.id;
            $(this).bjuiajax('doAjax', {
                url: delHandleUrl, data: obj, callback: function (json) {
                    callBackDictory(json);
                }
            })
            return;
        }

        function callBackDictory(json) {
            $(this).bjuiajax('ajaxDone', json);
            $(this).navtab("refresh", "navtab");
        }

        return {
            init: function () {
                handleSeachEvent();
                addUpdateShow();
            },
            handleAddUpdate: function (event, treeId, treeNode) {
                addUpdateShow(treeNode);
                event.preventDefault();
            },
            handleDelBefore: function (treeId, treeNode) {
                if (typeof treeNode.children != 'undefined') {
                    $(this).alertmsg("error", "节点存在子节点，无法删除！")
                    return false;
                }
                return true;
            },
            handleDelAfter: function (event, treeId, treeNode) {
                delHandle(treeNode);
            }
        }
    }();

    (function () {
        AMenuTreeShow.init();
    })();
</script>